<template>
  <div class="videos">
    <h2>搞笑视频！</h2>
    <div class="videos_item" v-for="item in videosdata" :key="item.created_at">
      <h2>{{item.text}}</h2>
      <video :src="item.videouri" width="333px" height="333px" controls 
        onerror ="javascript:void(this.src='/video/error.mp4')" 
      >111</video>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }){
    let result = await $axios.$get('https://www.apiopen.top/satinApi?type=1&page=1')
    return {videosdata:result.data}
  },
  mounted(){
    this.$nextTick(() => {  //加载中的效果，可自定义
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 2000)
    })
  },
  data(){
    return{
      load:false
    }
  }
}
</script>

<style lang="scss">
  .videos{
    h2{color:red;}
    .videos_item{
      border: 1px solid red;
      padding: 20px;
    }
  }

</style>